<template>
  <div class="analysis">
    <header>
      <p>VIP视图</p>
    </header>
    <div class="box-header">
      <el-form
        :model="formData"
        inline
        label-position="right"
        class="main_searchBar"
      >
        <el-form-item label="账期">
          <el-date-picker
            size="mini"
            value-format="yyyy"
            v-model="formData.acctMonth"
            type="year"
            placeholder="选择年"
            :picker-options="endDateDisabled"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="区域:">
          <dx-cascader :area_id.sync="formData.areaId" ref="cascader" />
        </el-form-item>

        <el-form-item label="客户经理">
          <el-select
            size="mini"
            clearable
            v-model="managerName"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in managerList"
              :key="item + index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="VIP">
          <el-select
            size="mini"
            clearable
            v-model="formData.vipNbr"
            :placeholder="managerName ? `请选择` : `请先选择客户经理`"
            :disabled="!managerName"
            filterable
          >
            <el-option
              v-for="(item, index) in vipList"
              :key="item + index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" size="mini">查询</el-button>
          <el-button type="primary" @click="handle_export" size="mini">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-body">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        border
        :header-cell-style="{
          background: 'rgb(237,241,246)',
          color: 'rgb(95,98,102)',
          border: '1px solid #ddd'
        }"
      >
        <el-table-column align="center" prop="class1"></el-table-column>
        <el-table-column align="center" label="融合/单产品" prop="class2"></el-table-column>
        <el-table-column align="center" label="套餐等级" prop="verticalIndexName"></el-table-column>
        <el-table-column align="center" :label="it+'月'" v-for="(it,i) in monthList" :key="`${it}${i}`">
          <el-table-column align="center" label="用户/套餐数" :prop="`TCvalue${it}`"></el-table-column>
          <el-table-column align="center" label="收入" :prop="`SRvalue${it}`"></el-table-column>
          <el-table-column align="center" label="ARPU" :prop="`ARPUvalue${it}`"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import qs from "qs";
const url = prefixAPI.pack;
export default {
  name: "analysis",
  data() {
    return {
      formData: {
        acctMonth: "",
        areaId: "",
        vipNbr: "",
      },
      managerName: "",
      // vipLoading: false,
      endDateDisabled: this.pickerDisabled(),
      disabledTime: "",
      managerList: [],
      vipList: [],
      tableData: [],
      tableLoading: false,
      monthList: [],
      classList: {}
    };
  },
  watch: {
    "formData.areaId"(val) {
      this.managerName = null;
      if (val != null) {
        $budgetAPI.getManager({areaId: val}, res => {
          this.managerList = res.content;
        })
      }
    },
    managerName(val) {
      this.formData.vipNbr = null;
      if (val != null) {
        $budgetAPI.getVip({ areaId: this.formData.areaId, managerName: val },
          res => {
            this.vipList = res.content;
          }
        );
      }
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    pickerDisabled() {
      let e = this;
      return {
        disabledDate: function (t) {
          if (e.disabledTime) {
            var n = t.getFullYear();
            if (n.toString() > e.disabledTime) {
              return !0;
            }
          }
        },
      };
    },
    init() {
      this.formData.areaId = JSON.parse(getSessionStorage("accountInfo")).areaId;
      this.getMonth();
    },
    getMonth() {
      $budgetAPI.getVipMaxYear({}, (res) => {
          if (res.code == 0) {
          this.formData.acctMonth = res.content || new Date().getFullYear().toString();
          this.disabledTime =res.content || new Date().getFullYear().toString();
        }
      })
    },
    //查询
    search() {
      if(this.formData.vipNbr == null){
        this.$message.warning("请先选择VIP");
        return;
      }
      this.getTableData();
    },
    // 导出
    handle_export() {
      if(this.formData.vipNbr == null){
        this.$message.warning("请先选择VIP");
        return;
      }
      // let params = Object.assign({},this.formData);
      // console.log(url);
      window.open(
        `${url}/vip/export?acctMonth=${this.formData.acctMonth}&areaId=${this.formData.areaId}&vipNbr=${this.formData.vipNbr}`,
        "_self"
      );

      // $budgetAPI.exportVip(this.formData, res => {
        // console.log(res);
      // })
    },
    getTableData() {
      let data = Object.assign(this.formData);
      this.tableLoading = true;
      $budgetAPI.getVipView(data, res => {
        if (res.code == 0) {
          this.monthList = [];
          if(res.content.length > 0){
            for(let i = 1; i <= 12; i++){
              for(let j = 0; j < res.content.length; j++){
                if(res.content[j][`ARPUvalue${i}`] != undefined || 
                    res.content[j][`SRUvalue${i}`] != undefined || 
                    res.content[j][`TCvalue${i}`] != undefined){
                  this.monthList.push(i);
                  break;
                }
              }
            }            
          }
          this.tableLoading = false;
          this.tableData = res.content;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.analysis {
  width: 100%;
  height: 100%;
  > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
</style>
